﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改密碼</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div style= "text-align:center;">
        <table style="width:500px; font-size: 9pt; margin:200px auto auto auto;" bordercolor="whitesmoke" bgcolor="#6699cc" border="1">
            <tr>
                <td colspan="3" style="text-align: center; height: 35px;">
                    <font color="white" size="4">修改密碼</font>
                </td>
            </tr>
            <tr style="font-size: 9pt">
                <td colspan="3" style="color: #0000ff; height: 19px; text-align:center">
                    <span style="color: white">密碼規則：1.長度必須大於6位 &nbsp; &nbsp; 2.不可與帳號相同 &nbsp; &nbsp; 3.密碼有效期為90天</span>
                </td>
            </tr>
            <tr>
                <td style="width: 100px; height: 29px; text-align: center">帳號</td>
                <td style="width: 150px; height: 29px; text-align: center;">
                    <input id="userNameUpd" type="text" onchange="queryUser()" value="@Session["Card_No"].ToString()" />
                </td>
                <td style="width: 110px; height: 29px; text-align: left; ">
                    <span id="noUser"style="color:red;" hidden="hidden">不存在此帳號</span>
                </td>
            </tr>
            <tr>
                <td style="width: 100px; text-align: center; height: 30px; ">當前密碼</td>
                <td style="width: 150px; text-align: center; height: 30px;">
                    <input id="oldPwd" type="password" onchange="queryPwd()" />
                </td>
                <td style="width: 110px; text-align: left; height: 30px; ">
                    <span id="noOldPwd" style="color:red;" hidden="hidden">舊密碼輸入不正確</span>
                </td>
            </tr>
            <tr>
                <td style="width: 100px; text-align: center; height: 36px; ">新密碼</td>
                <td style="width: 150px; height: 36px; text-align: center;">
                    <input id="newPwd" type="password" onchange="valiNewPwd()" />
                </td>
                <td style="width: 110px; height: 36px; text-align: left; ">
                    <span id="newPwd6" style="color:red;" hidden="hidden">新密碼長度必須大於6位</span>
                    <br />
                    <span id="pwdSame" style="color:red;" hidden="hidden">新密碼不可與帳號相同</span>
                </td>
            </tr>
            <tr>
                <td style="width: 100px; text-align: center; height: 30px; ">新密碼確認</td>
                <td style="width: 150px; text-align: center; height: 30px;">
                    <input id="newPwd2" type="password" onchange="valiTwicePwd()" />
                </td>
                <td style="width: 110px; text-align: left; height: 30px; ">
                    <span id="pwdDiff" style="color:red;" hidden="hidden">兩次輸入的新密碼不相同</span>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="width: 150px; height:50px; text-align: center">
                    <input id="btnUpd" type="button" value="修改" style="width: 80px;" onclick="btnUpdClick()" />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input id="btnCancel" type="button" value="取消" style="width: 80px;" onclick="btnCancelClick()" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

<script>
    function queryUser() {
        if ($("#userNameUpd").val() != "" && $("#userNameUpd").val() != null) {
            $.ajax({
                type: "post",
                url: "/Login/QueryUser",
                data: {
                    userName: $("#userNameUpd").val()
                },
                success: function (data) {
                    var result = JSON.parse(data);
                    if (result.flag) {
                        $("#noUser").hide();
                    } else {
                        $("#noUser").show();
                    }
                },
                error: function (err) {

                }
            });
        } else {
            $("#noUser").hide();
        }
    }
    function queryPwd() {
        if ($("#oldPwd").val() != "" && $("#oldPwd").val() != null && $("#userNameUpd").val() != "" && $("#userNameUpd").val() != null) {
            $.ajax({
                type: "post",
                url: "/Login/QueryPwd",
                data: {
                    userName: $("#userNameUpd").val(),
                    password: $("#oldPwd").val()
                },
                success: function (data) {
                    var result = JSON.parse(data);
                    if (result.flag) {
                        $("#noOldPwd").hide();
                    } else {
                        $("#noOldPwd").show();
                    }
                },
                error: function (err) {

                }
            });
        } else {
            $("#noOldPwd").hide();
        }
    }
    function valiNewPwd() {
        var newPwd = $("#newPwd");
        if (newPwd.val() == "" || newPwd.val() == null) {
            $("#newPwd6").hide();
            $("#pwdSame").hide();
        } else {
            if (newPwd.val().length <= 6) {
                $("#newPwd6").show();
            } else {
                $("#newPwd6").hide();
            }
            if (newPwd.val() == $("#userNameUpd").val()) {
                $("#pwdSame").show();
            } else {
                $("#pwdSame").hide();
            }
        }
    }
    function valiTwicePwd() {
        var newPwd = $("#newPwd");
        var newPwd2 = $("#newPwd2");
        if (newPwd.val() != "" && newPwd.val() != null && newPwd2.val() != "" && newPwd2.val() != null) {
            if (newPwd.val() == newPwd2.val()) {
                $("#pwdDiff").hide();
            } else {
                $("#pwdDiff").show();
            }
        } else {
            $("#pwdDiff").hide();
        }
    }

    function btnUpdClick() {
        if ($("#noUser").is(":hidden") && $("#noOldPwd").is(":hidden") && $("#newPwd6").is(":hidden") && $("#pwdSame").is(":hidden") && $("#pwdDiff").is(":hidden")) {
            var userNameUpd = $("#userNameUpd");
            var oldPwd = $("#oldPwd");
            var newPwd = $("#newPwd");
            var newPwd2 = $("#newPwd2");
            if (userNameUpd.val() == "" || userNameUpd == null) {
                alert("請輸入賬號！");
                return;
            }
            if (oldPwd.val() == "" || oldPwd == null) {
                alert("請輸入舊密碼！");
                return;
            }
            if (newPwd.val() == "" || newPwd == null) {
                alert("請輸入新密碼！");
                return;
            }
            if (newPwd2.val() == "" || newPwd2 == null) {
                alert("請確認新密碼！");
                return;
            }
            $.ajax({
                type: "post",
                url: "/Login/Update",
                data: {
                    userName: userNameUpd.val(),
                    newPassword: newPwd.val()
                },
                success: function (data) {
                    var result = JSON.parse(data);
                    if (result.flag) {
                        alert(result.msg);
                        //跳轉
                        window.location.href = "@Url.Action("Login")";
                    } else {
                        alert(result.msg);
                    }
                },
                error: function (err) {

                }
            });
        } else {
            alert("數據驗證未通過，請檢查後重新輸入！");
        }
    }

    function btnCancelClick() {
        //window.history.back();
        window.location.href = document.referrer;
    }
</script>
